<template>
	<view class="withdraw-page">
		<view class="nav" v-if="withdraw_type.length">
			<view class="item" v-if="withdraw_type.includes('wechat')" :class="{'on': navCurrent == 'wechat'}" @click="navEvent('wechat')">
				<view class="line"></view>
				<view class="icon flex items-center justify-center">
					<u-icon name="weixin-fill" :color="navCurrent == 'wechat' ? '#fff' : '#333'" size="24rpx"></u-icon>
				</view>
				<view class="label">微信</view>
			</view>
			<view class="item" v-if="withdraw_type.includes('alipay')" :class="{'on': navCurrent == 'alipay'}" @click="navEvent('alipay')">
				<view class="line"></view>
				<view class="icon flex items-center justify-center">
					<u-icon name="zhifubao" :color="navCurrent == 'alipay' ? '#fff' : '#333'" size="24rpx"></u-icon>
				</view>
				<view class="label">支付宝</view>
			</view>
			<view class="item" v-if="withdraw_type.includes('bank')" :class="{'on': navCurrent == 'bank'}" @click="navEvent('bank')">
				<view class="line"></view>
				<view class="icon flex items-center justify-center">
					<u-icon name="rmb" :color="navCurrent == 'bank' ? '#fff' : '#333'" size="24rpx"></u-icon>
				</view>
				<view class="label">银行卡</view>
			</view>
		</view>
		
		<view class="container" v-show="withdraw_type.length">
			<view class="card-box">
				<u-form :model="form" ref="uForm" :rules="rules" labelWidth="200rpx">
					<view class="top-box">
						<u-form-item labelPosition="top" prop="amount">
							<view class="label-box" slot="label">
								<view class="label">可用{{ config.trade_currency }}（{{ userInfo.deposit }}）</view>
								<view class="mord" @click="goDetail">提现明细>></view>
							</view>
							<u-input v-model="form.amount" type="number" placeholder="请输入数量" border="none" />
						</u-form-item>
					</view>
					
					<view v-if="navCurrent == 'wechat'">
						<u-form-item label="收款码" labelPosition="top" prop="receiving_code">
							<view class="mt-12">
								<u-upload
									:fileList="receiving_code"
									name="receiving_code"
									:maxCount="1"
									@afterRead="afterRead"
									@delete="deletePic"
								></u-upload>
							</view>
						</u-form-item>
					</view>
					
					<view v-if="navCurrent == 'alipay'">
						<u-form-item label="真实姓名" borderBottom prop="name">
							<u-input v-model="form.name" type="text" placeholder="请输入真实姓名" border="none" />
						</u-form-item>
						<u-form-item label="支付宝账号" prop="name">
							<u-input v-model="form.account" type="text" placeholder="请输入支付宝账号" border="none" />
						</u-form-item>
					</view>
					
					<view v-if="navCurrent == 'bank'">
						<u-form-item label="开户人" borderBottom prop="bankUser">
							<u-input v-model="form.bankUser" type="text" placeholder="请输入开户人姓名" border="none" />
						</u-form-item>
						<u-form-item label="银行名称" borderBottom prop="bankName">
							<u-input v-model="form.bankName" type="text" placeholder="请输入银行名称" border="none" />
						</u-form-item>
						<u-form-item label="银行账号" borderBottom prop="bankAccount">
							<u-input v-model="form.bankAccount" type="text" placeholder="请输入银行账号" border="none" />
						</u-form-item>
						<view class="idcard-box">
							<u-form-item labelPosition="top" prop="idcard">
								<view class="label-box" slot="label">
									<text class="label">身份证照片</text>
									<text class="tips">（请确保身份证边框完整，字体清晰，无反光）</text>
								</view>
								<view class="image-box">
									<u-upload
										:fileList="id_card_img_1"
										name="id_card_img_1"
										:maxCount="1"
										width="300rpx"
										height="260rpx"
										@afterRead="afterRead"
										@delete="deletePic"
									>
										<view class="box">
											<image class="image" src="@/static/idcrad-1.png" mode="aspectFill"></image>
											<view class="text">上传人像面</view>
										</view>
									</u-upload>
									<u-upload
										:fileList="id_card_img_2"
										name="id_card_img_2"
										:maxCount="1"
										width="300rpx"
										height="260rpx"
										@afterRead="afterRead"
										@delete="deletePic"
									>
										<view class="box">
											<image class="image" src="@/static/idcrad-2.png" mode="aspectFill"></image>
											<view class="text">上传国徽面</view>
										</view>
									</u-upload>
								</view>
							</u-form-item>
						</view>
					</view>
				</u-form>
			</view>
			<view class="tips-box">
				<text class="label">*温馨提示：</text>
				<text class="text">提现可能存在延时，稍后在明细中查看</text>
			</view>
			<view class="button-box">
				<button class="btn" @click="confirm">立即提现</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { uploadURL } from '@/api/config.js'
	import { getMaterial, getConfig, applyCash } from '@/api/api'

	export default {
		data () {
			return {
				userInfo: {},
				config: {},
				withdraw_type: [],
				
				navCurrent: 'wechat',
				form: {
					amount: '',
					
					receiving_code: '', // 微信收款码
					
					/* 支付宝 */
					name: '',
					account: '',
					
					/* 银行卡 */
					bankUser: '',
					bankName: '',
					bankAccount: '',
					id_card_img_1: '', // 身份证正面
					id_card_img_2: '', // 身份证反面
				},
				rules: {
					amount: { required: true, message: '请输入提现数量', trigger: 'blur' },
					
					receiving_code: { validator: (rule, value, callback) => {
						return value === 0 || !this.$u.test.isEmpty(value)
					}, message: '请上传收款码', trigger: 'blur' },
					
					name: { required: true, message: '请输入真实姓名', trigger: 'blur' },
					account: { required: true, message: '请输入支付宝账号', trigger: 'blur' },
				
					bankUser: { required: true, message: '请输入开户人姓名', trigger: 'blur' },
					bankName: { required: true, message: '请输入银行名称', trigger: 'blur' },
					bankAccount: { required: true, message: '请输入银行账号', trigger: 'blur' },
					idcard: {
						validator: () => {
							console.log(!!(this.form.id_card_img_1 && this.form.id_card_img_2));
							return !!(this.form.id_card_img_1 && this.form.id_card_img_2)
						},
						message: '请输入银行账号', trigger: 'blur'
					}
				},
				
				receiving_code: [], // 微信收款码
				id_card_img_1: [], // 身份证正面
				id_card_img_2: [], // 身份证反面
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad () {
			getMaterial().then(res => {
				if (res) {
					this.userInfo = res.data.data
				}
			})
			
			getConfig().then(res => {
				if (res) {
					this.config = res.data
					this.withdraw_type = res.data.withdraw_type
					if (this.withdraw_type.length) {
						this.navCurrent = this.withdraw_type[0]
					}
				}
			})
		},
		methods: {
			navEvent (index) {
				this.navCurrent = index
			},
			goDetail () {
				uni.navigateTo({
					url: '/pages/my/withdrawDetail'
				})
			},
			
			// 删除图片
			deletePic(event) {
				this[event.name].splice(event.index, 1)
				
				this.form[event.name] = ''
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[event.name].length
				lists.map((item) => {
					this[event.name].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					this.uploadFilePromise(lists[i].url).then(result => {
						let item = this[event.name][fileListLen]
						this[event.name].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result.path
						}))
						this.form[event.name] = result.id
						fileListLen++
					}).catch(() => {
						let item = this[event.name][fileListLen]
						this[event.name].splice(fileListLen, 1, Object.assign(item, {
							status: 'failed',
							message: '上传失败',
						}))
						fileListLen++
					})
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: uploadURL, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'img',
						success: (res) => {
							const data = JSON.parse(res.data)
							if (data.code == 1) {
								resolve({
									path: data.path,
									id: data.id
								})
							} else {
								reject()
							}
						}
					});
				})
			},
			
			confirm () {
				this.$refs.uForm.validate().then(res => {
					let form = {
						type: 'deposit',
						amount: this.form.amount,
						method: this.navCurrent,
					}
					
					if (this.navCurrent == 'wechat') {
						form.receiving_code = this.form.receiving_code
					} else if (this.navCurrent == 'alipay') {
						form.name = this.form.name
						form.account = this.form.account
					} else if (this.navCurrent == 'bank') {
						form.name = this.form.bankUser
						form.bank = this.form.bankName
						form.account = this.form.bankAccount
						form.id_card_img_1 = this.form.id_card_img_1
						form.id_card_img_2 = this.form.id_card_img_2
					}
					
					applyCash(form).then(res => {
						if (res) {
							uni.$u.toast(res.msg)
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my/my'
								})
							}, 200)
						}
					})
				}).catch(errors => {
					console.log('errors', errors)
					uni.$u.toast('校验失败')
				})
			},
		}
	}
</script>

<style lang="scss">
.withdraw-page {
	box-sizing: border-box;
	min-height: 100%;
	background-color: $bg-color;
	.container {
		padding: 24rpx;
	}
	.nav {
		height: 130rpx;
		background-color: #FFFFFF;
		border-bottom: 1px solid #eee;
		display: flex;
		align-items: center;
		.item {
			flex: 1;
			height: 130rpx;
			border-right: 1px solid #eee;
			&.on {
				.line {
					height: 39rpx;
					background-color: $primary-color;
				}
				.icon {
					border-color: $primary-color;
					background-color: $primary-color;
				}
				.label {
					font-size: 28rpx;
					font-weight: bold;
					color: $primary-color;
				}
			}
			.line {
				width: 2rpx;
				height: 20rpx;
				margin: 0 auto;
				background-color: #333;
				transition: height 0.3s; 
			}
			.icon {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border: 2rpx solid #333;
				text-align: center;
				line-height: 37rpx;
				margin: 0 auto;
			}
			.label {
				font-size: 26rpx;
				margin-top: 6rpx;
				text-align: center;
			}
		}
	}
	.card-box {
		padding: 0 40rpx 6rpx;
		border-radius: 20rpx;
		background-color: #fff;
		::v-deep {
			.u-form-item__body__right__message {
				margin-left: 0 !important;
			}
		}
		.top-box {
			padding: 20rpx 0 6rpx;
			border-bottom: 1rpx solid #eee;
			::v-deep {
				.u-form-item__body {
					padding: 20rpx 0;
				}
				.u-input__content__field-wrapper__field {
					font-size: 40rpx !important;
					font-weight: bold;
				}
				.input-placeholder {
					color: #999;
				}
			}
			.label-box {
				margin-bottom: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.label {
					color: #333;
					font-size: 26rpx;
				}
				.mord {
					color: #333;
					font-size: 26rpx;
				}
			}
		}
		.idcard-box {
			.label-box {
				.label {
					color: #303133;
					font-size: 15px;
				}
				.tips {
					color: #ff4c0d;
					font-size: 22rpx;
				}
			}
			.image-box {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				.box {
					box-sizing: border-box;
					width: 300rpx;
					height: 260rpx;
					border: 1rpx solid #e5e5e5;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.image {
						width: 244rpx;
						height: 154rpx;
					}
					.text {
						margin-top: 30rpx;
						color: #333;
						font-size: 28rpx;
					}
				}
			}
		}
	}
	.tips-box {
		margin-top: 36rpx;
		padding: 0 36rpx;
		font-size: 24rpx;
		.label {
			color: #ff4c0d;
		}
		.text {
			color: #333;
		}
	}
	.button-box {
		margin-top: 66rpx;
		.btn {
			height: 86rpx;
			border-radius: 86rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
			background-color: #5749f7;
			&[disabled] {
				color: #d6d6d6;
				background-color: #999999;
			}
		}
	}
}
</style>
